<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>{{ 'addon.messages.contacts' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <!-- Add an empty context menu so split view pages can add items, otherwise the menu disappears in some cases. -->
            <core-context-menu />
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-split-view>
        <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
        </ion-refresher>

        <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch()" [placeholder]="'addon.messages.contactname' | translate"
            autocorrect="off" spellcheck="false" lengthCheck="2" [disabled]="!loaded" searchArea="AddonMessagesContacts" />

        <core-loading [hideUntil]="loaded" [message]="loadingMessage">
            <core-empty-box *ngIf="!hasContacts && searchString === ''" icon="fas-address-book"
                [message]="'addon.messages.contactlistempty' | translate" />

            <core-empty-box *ngIf="!hasContacts && searchString !== ''" icon="fas-address-book"
                [message]="'addon.messages.nousersfound' | translate" />

            <ion-list *ngFor="let contactType of contactTypes" class="ion-no-margin">
                <ng-container *ngIf="contacts[contactType] && (contacts[contactType].length > 0 || contactType === searchType)">
                    <ion-item-divider>
                        <ion-label>
                            <p class="item-heading">{{ 'addon.messages.type_' + contactType | translate }}</p>
                        </ion-label>
                        <ion-note slot="end" class="ion-padding-end">
                            <ion-badge>{{ contacts[contactType].length }}</ion-badge>
                        </ion-note>
                    </ion-item-divider>
                    <ng-container *ngFor="let contact of contacts[contactType]">
                        <!-- Don't show deleted users -->
                        <ion-item class="ion-text-wrap addon-messages-conversation-item"
                            *ngIf="contact.profileimageurl || contact.profileimageurlsmall" [attr.aria-label]="contact.fullname"
                            (click)="gotoDiscussion(contact.id)" [detail]="true" button
                            [attr.aria-current]="contact.id === discussionUserId ? 'page' : 'false'">
                            <core-user-avatar [user]="contact" slot="start" [checkOnline]="contact.showonlinestatus" />
                            <ion-label>
                                <p class="item-heading">{{ contact.fullname }}</p>
                            </ion-label>
                        </ion-item>
                    </ng-container>
                </ng-container>
            </ion-list>
        </core-loading>
    </core-split-view>
</ion-content>
